/******************************************************************
Site Name:
Author:

Stylesheet: Button Styles

Buttons are a pretty important part of your site's style, so it's
important to have a consistent baseline for them. Use this stylesheet
to create all kinds of buttons.

Helpful Links:
http://galp.in/blog/2011/08/02/the-ui-guide-part-1-buttons/

******************************************************************/

/*********************
BUTTON DEFAULTS
We're gonna use a placeholder selector here
so we can use common styles. We then use this
to load up the defaults in all our buttons.

Here's a quick video to show how it works:
http://www.youtube.com/watch?v=hwdVpKiJzac

*********************/
%btn {
  @include background($blue);
  @include border-radius(0);
  color: $white;
}

.blue-btn {
  @extend %btn;
  background-color: $blue;
}

.yimik-chip{
  display: inline-block;
  height: 1.5em;
  box-sizing: border-box;
  margin: 2px 0;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-radius: 1em;
  -webkit-transition: box-shadow .25s cubic-bezier(.4,0,.2,1);
  transition: box-shadow .25s cubic-bezier(.4,0,.2,1);
  will-change: box-shadow;
  font-size: 0.85em;
}
.yimik-chip-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  overflow: hidden;
  text-align: center;
}
.yimik-chip-icon i {
  font-size: 1em;
  vertical-align: top;
  line-height: 1.5em;
  height: 1.5em;
  box-sizing: border-box;
}
.yimik-chip-title {
  display: inline-block;
  padding-right: 12px;
  line-height: 1.5em;
  vertical-align: top;
}